<script setup>
// 选择器组件

defineProps({
  width: {
    type: String,
    required: true
  },
  options: {
    type: Array,
    required: true
  }
});

const selected = defineModel();

</script>

<template>
  <el-select
      v-model="selected"
      filterable
      no-match-text="没有符合条件的结果"
      placeholder="全部"
      popper-class="my-selector-dropdown"
      popper-append-to-body="false"
      :style="{ 'width': width + 'px' }"
  >
    <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
    />
  </el-select>
</template>

<style>
.el-select__placeholder.is-transparent {
  /* 选择器输入框文字样式 */
  color: #2a3441 !important;
}
.el-select__placeholder {
  /* 选择器输入框文字样式 */
  color: #2a3441 !important;
}
.el-select__wrapper {
  /* 选择器输入框样式 */
  /*margin: px !important;*/
  /*font-size: px !important;*/
  /*height: px !important;*/
  background-color: white !important;
  border: 1px solid #2a3441 !important;
}
.el-select__wrapper.is-focused {
  /* 选择器输入框聚焦时样式 */
  border: 1px solid #568fc1 !important;
}
</style>

<style>
.my-selector-dropdown {
  /* 下拉框样式 */
  background-color: white;


  .el-select-dropdown__item {
    /* 选项样式 */
    color: #2a3441;
    background-color: white;
    /*height: px;*/
    /*font-size: px;*/
  }
  .el-select-dropdown__item:hover {
    /* 选项上悬停时样式 */
    color: #568fc1;
    background-color: #e4f7fb;
    /*height: px;*/
    /*font-size: px;*/
  }
  .el-select-dropdown__item.is-selected {
    /* 选中样式 */
    background-color: #e4f7fb;
    color: #568fc1;
    font-weight: bold;
    /*height: px;*/
    /*font-size: px;*/
  }
  .el-select-dropdown__list {
    padding: 0;
  }
  .el-select-dropdown__empty {
    /* 搜索条件无匹配时样式 */
    background-color: white;
    border: 1px solid #2a3441;
    color: #2a3441;
    /*height: px;*/
    /*font-size: px;*/
  }
}
</style>